<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台管理系统 - demo</title>
    <link href="./css/common.css" rel="stylesheet">
</head>

<body data-logobg="default" data-sidebarbg="default" data-headerbg="default" data-theme="default">
    <div class="layout-container">
        <!--头部信息-->
        <header class="layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="aside-toggler">
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> UI元素 </span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-36 m-r-10" src="images/users/avatar.jpg" alt="管理员" />
                                <span>管理员 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="0_login02.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--左侧导航-->
        <aside class="layout-sidebar">
            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="main.html"><img src="images/logo-sidebar.png" title="" alt="" /></a>
            </div>
            <div class="layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a href="main.html"><i class="mdi mdi-home"></i> 欢迎页</a> </li>

                        <li class="nav-item nav-item-has-subnav active open">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>示例元素+页面</a>
                            <ul class="nav nav-subnav">
                                <li class="active"> <a href="demo01.html">UI元素</a> </li>
                                <li> <a href="0_search.html">搜索框类型</a> </li>
                                <li> <a href="0_card.html">卡片布局</a> </li>
                                <li> <a href="0_table.html">表格布局</a> </li>
                            </ul>
                        </li>

                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单示例</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="#">一级菜单</a> </li>
                                <li class="nav-item nav-item-has-subnav">
                                    <a href="#">一级菜单</a>
                                    <ul class="nav nav-subnav">
                                        <li> <a href="#">二级菜单</a> </li>
                                        <li class="nav-item nav-item-has-subnav">
                                            <a href="#">二级菜单</a>
                                            <ul class="nav nav-subnav">
                                                <li> <a href="#">三级菜单</a> </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li> <a href="#">一级菜单</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

            </div>

        </aside>
        <!--End 左侧导航-->


        <!--页面主要内容-->
        <main class="layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-horizontal" method="">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-username"><span class="sign">*</span>用户名</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="text" id="example-hf-username" name="example-hf-username" placeholder="请输入用户名..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group m-b-0">
                                            <label class="col-md-3 col-sm-2  col-xs-2 control-label" for="example-hf-password">密码</label>
                                            <div class="col-md-9 col-sm-10 col-xs-10 ">
                                                <input class="form-control" type="password" id="example-hf-password" name="example-hf-password" placeholder="请输入密码..">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="card">
                            <ul class="nav nav-tabs page-tabs">
                                <li> <a href="demo01.html">表单控件</a> </li>
                                <li class="active"> <a href="#">折叠面板</a> </li>
                                <li> <a href="demo03.html">其他控件</a> </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5>普通折叠效果</h5>
                                            <!--折叠效果-->
                                            <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                            Link with href
                                          </a>
                                            <button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                            Button with data-target
                                          </button>
                                            <div class="collapse m-t-10" id="collapseExample">
                                                <div class="well">
                                                    笑谈渴饮匈奴血，壮志饥餐胡虏肉。
                                                </div>
                                            </div>
                                            <!--折叠效果 End-->
                                            <hr>
                                            <h5>手风琴效果</h5>
                                            <!--手风琴效果-->
                                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                                <div class="panel panel-primary">
                                                    <div class="panel-heading" role="tab" id="headingOne">
                                                        <a class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                            第一回 赈民饥包公奉旨　图谋害庞相施计
                                                        </a>
                                                    </div>
                                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                                        <div class="panel-body">
                                                            话说大宋开基之主太祖赵匡胤，此位天子，原乃上界赤龙临凡，英雄猛勇，豪侠情怀，创开四百年天下。陈桥兵变，黄袍加身，代位于后周而归一统。前书已有《两宋》表明，兹不絮谈。且说大宋相传继统四世仁宗嘉佑王，当时天子英明，群臣为国，四方宁靖，百姓安康。前者宋太祖既殁之后，杨家父子众英雄相继而亡。今者人得五虎，英雄佐粥，保护江山，扫除国敌。后话休题多表。忽一日，仁宗天子临朝。但见祥光灿烂，瑞色辉煌。
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-cyan">
                                                    <div class="panel-heading" role="tab" id="headingTwo">
                                                        <a class="panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                            第二回 孙兵部到关权理　狄元帅奉旨征西
                                                        </a>
                                                    </div>
                                                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                                        <div class="panel-body">
                                                            且说三关狄元帅平生梗直，铁性无私，智勇双全。自从幼年山西家乡遭逢水难，王禅老祖救了他，带上水帘洞传授兵书武略，知他仙道无缘，王侯有位。学艺数年，命他下山扶助宋君，原是一条国栋金梁，与单单赛花公主有宿世良缘。自从押送征衣，上年大破西辽，仁宗天子知他英勇，杨宗保败亡，便封他镇守此关。号令威严，兵遵将应，就是朝中文武，何人不看重这小英雄？
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <!--手风琴效果 End-->

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</body>
<script type="text/javascript" src="js/commonJs.js"></script>

</html>